<template>
  <div class="home">
    <header>
      <input
        type="text"
        v-model="search"
        @blur="searchftn"
        placeholder="请输入内容"
      />
    </header>
    <history v-if="list.length==0" @check="check"></history>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item.goods_name }}</li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import { reactive, toRefs } from "vue";
import axios from "axios";
import History from '../components/history.vue';
import { useStore } from 'vuex';
export default {
  name: "Home",
  components: {History},
  setup(props) {
    const store = useStore();
    const data = reactive({
      search: "",
      list: [],
    });

    const searchftn = () => {
      // 失去焦点搜索事件
      axios.get(`https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query=${data.search}`).then((res) => {
          data.list = res.data.message || [];
          if (data.search){
             store.commit('add',data.search);
          }
        });
    };

    const check = (val) => {
      data.search = val;
      searchftn();
    }
    return {
      ...toRefs(data),
      searchftn,
      check
    };
  },
};
</script>
<style lang="scss" scoped>
header {
  display: flex;
  background: red;
  height: 50px;
  align-items: center;
  justify-content: center;
  input {
    border: none;
    height: 36px;
    border-radius: 16px;
    width: 80%;
    padding: 0 10px;
  }
}
.home {
  height: 100%;
  ul {
    height: calc(100% - 50px);
    overflow: auto;
  }
}
</style>